<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-06-10 15:02:14
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-06-17 13:39:09
 * @FilePath: /anxinxiu/src/subpages/hotActive.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from "@/api/api";
import {
  isPC,
  isWechat,
  isZxcxAPP,
  zxcxActionHideTitleBar,
} from "@/utils/zxcxWebkit.js";

// 响应式数据
const posterId = ref("")
const posterInfo = ref({})

// 路由相关
const route = useRoute()
const router = useRouter()

// 获取海报详情
const getPosterDetail = async () => {
  let res = await api.active.getPosterDetail({
    posterId: posterId.value,
  });
  posterInfo.value = res;
  document.title = posterInfo.value.title;
}

// 跳转到服务详情页
const jump = (v) => {
  router.push({
    path: "/serveDetail",
    query: {
      goodsId: v.goodsId,
    },
  });
}

// 组件挂载时执行
onMounted(() => {
  posterId.value = route.query.id;
  if (isZxcxAPP() || isPC()) {
    zxcxActionHideTitleBar({
      hideTitleBar: 0,
      hideTitleBarIcon: 1,
    });
    getPosterDetail();
  } else if (isWechat()) {
    //跳转微信分享链接
    window.location.replace(
      `https://h5.cxbtv.cn/anxinxiushare/#/activity?activityId=${posterId.value}`
    );
  }
})

// 组件销毁前执行
onBeforeUnmount(() => {
  document.title = "安心修";
  zxcxActionHideTitleBar({
    hideTitleBar: 0,
    hideTitleBarIcon: 0,
  });
})
</script>


<template>
  <div v-if="isZxcxAPP() || isPC()" class="home">
    <van-image width="100%" height="100%" fit="cover" :src="posterInfo.topPic" lazy-load>
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <van-image v-for="(v, i) in posterInfo.goodsInfos" :key="JSON.stringify(v) + i" width="100%" fit="cover" :src="v.pic"
      lazy-load @click="jump(v)">
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
  </div>
</template>



<style lang="less" scoped>
.home {
  min-height: 100vh;

  :deep(.van-image) {
    display: block;
  }
}
</style>
